<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>gulimall注册页面</title>
    <script th:src="@{/register/libs/jquery-1.12.4.min.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/register/js/jQuery/jquery-3.1.1.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/register/bootStrap/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/register/sass/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/register/css/index.css}">


</head>

<body>

<header>
    <div class="desc">欢迎注册</div>
    <div class="dfg">
        <span>已有账号？</span>
        <a class="go-to-login" th:href="@{http://localhost:6060/login.html}">请登录</a>
    </div>
</header>
<section>
    <form action="/register-member" method="post" class="one">
        <div class="register-box">
            <label class="username_label">用 户 名
                <input name="username" maxlength="20" type="text" placeholder="您的用户名和登录名">
            </label>
            <div class="tips" style="color: red"
                 th:text="${errors != null ? (#maps.containsKey(errors, 'username') ? errors.username : '') : ''}"/>
        </div>
        <div class="register-box">
            <label class="other_label">设 置 密 码
                <input name="password" maxlength="20" type="password" placeholder="建议至少使用两种字符组合">
            </label>
            <div class="tips" style="color: red"
                 th:text="${errors != null ? (#maps.containsKey(errors, 'password') ? errors.password : '') : ''}"/>
        </div>
        <div class="register-box">
            <label class="other_label">确 认 密 码
                <input name="curPassword" maxlength="20" type="password" placeholder="请再次输入密码">
            </label>
            <div class="tips" style="color: red"
                 th:text="${errors != null ? (#maps.containsKey(errors, 'curPassword') ? errors.curPassword : '') : ''}"/>
        </div>
        <div class="register-box">
            <label class="other_label">
                <span>中国 +86</span>
                <input name="phoneNumber" class="phone" id="phoneNum" maxlength="20" type="text" placeholder="建议使用常用手机">
            </label>
            <div class="tips" style="color: red"
                 th:text="${errors != null ? (#maps.containsKey(errors, 'phoneNumber') ? errors.phoneNumber : '') : ''}"/>
        </div>
        <div class="register-box">
            <label class="other_label">验 证 码
                <input name="verificationCode" maxlength="20" type="text" placeholder="请输入验证码" class="caa">
                <div class="tips" style="color: red"
                     th:text="${errors != null ? (#maps.containsKey(errors, 'verificationCode') ? errors.verificationCode : '') : ''}"/>
            </label>
			<a id="sendCode">发送验证码</a>
        </div>
        <div class="arguement">
            <input type="checkbox" id="xieyi"> 阅读并同意
            <!-- <a th:href="@{/register/#}">《谷粒商城用户注册协议》</a> -->
            <!-- <a th:href="@{/register/#}">《隐私政策》</a> -->
            <div class="tips" style="color: red" />
            <br/>
            <div class="submit_btn">
                <button type="submit" id="submit_btn">立 即 注 册</button>
            </div>
        </div>
    </form>

    <div class="two">
        <div class="right_r">
            <div class="right_r1">
                <img th:src="@{/register/img/a65a18e877a16246a92e1b755bd88a03_03.png}"/>
                <span>企业用户注册</span>
            </div>
            <div class="right_r2">
                <img th:src="@{/register/img/a65a18e877a16246a92e1b755bd88a03_06.png}"/>
                <span>INTERNATIONAL <br/> CUSTOMERS</span>
            </div>
        </div>
    </div>

</section>
<br/><br/>
<hr>
<div class="footer">
    <ul>
        <li>
            <a th:href="@{/register/}">关于我们</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">联系我们</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">人次招聘</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">商家入驻</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">广告服务</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">手机谷粒商城</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">友情链接</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">销售联盟</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">谷粒商城社区</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">谷粒商城公益</a>
        </li>
        <li>|</li>
        <li>
            <a th:href="@{/register/}">English Site</a>
        </li>
    </ul>
</div>
<p class="bq">Copyright©2004-2016 谷粒商城gulimall.com 版权所有</p>
<br/><br/>
<script type="text/javascript" charset="utf-8">
	$(function () {
		$('go-to-login').click(function () {
			let location_prefix = location.href.split(':');
			location.href = location_prefix + '6060' + '/login.html';
		});
	});
</script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        var stuList = getStuList(); //设置传送信息：学生的集合

        //聚焦失焦input
        $('input').eq(0).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
            }
        })
        $('input').eq(1).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
            }
        })
        $('input').eq(2).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("请再次输入密码");
            }
        })
        $('input').eq(3).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
            }
        })
        $('input').eq(4).focus(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next().next("div").text("看不清？点击图片更换验证码");
            }
        })
        //input各种判断
        //用户名：
        $('input').eq(0).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length > 0 && $(this).val().length < 4) {
                $(this).parent().next("div").text("长度只能在4-20个字符之间");
                $(this).parent().next("div").css("color", 'red');
            } else if ($(this).val().length >= 4 && !isNaN($(this).val())) {
                $(this).parent().next("div").text("用户名不能为纯数字");
                $(this).parent().next("div").css("color", 'red');
            } else {
                for (var m = 0; m < stuList.length; m++) {
                    if ($(this).val() == stuList[m].name) {
                        $(this).parent().next("div").text("该用户名已被注册");
                        $(this).parent().next("div").css("color", 'red');
                        return;
                    }
                }
                $(this).parent().next("div").text("");
            }
        })
        //密码
        $('input').eq(1).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length > 0 && $(this).val().length < 6) {
                $(this).parent().next("div").text("长度只能在6-20个字符之间");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //	确认密码
        $('input').eq(2).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val() != $('input').eq(1).val()) {
                $(this).parent().next("div").text("两次密码不匹配");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        //	手机号
        $('input').eq(3).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().substr(0, 3) != 138 && $(this).val().substr(0, 3) != 189 && $(this).val().substr(0, 3) != 139 && $(this).val().substr(0, 3) != 158 && $(this).val().substr(0, 3) != 188 && $(this).val().substr(0, 3) != 157 || $(this).val().length != 11) {
                $(this).parent().next("div").text("手机号格式不正确");
                $(this).parent().next("div").css("color", 'red');
            } else {
                $(this).parent().next("div").text("");
            }
        })
        // 	验证码
        //	 验证码刷新
        function code() {
            var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
            var str1 = 0;
            for (var i = 0; i < 4; i++) {
                str1 += str.charAt(Math.floor(Math.random() * 62))
            }
            str1 = str1.substring(1)
            $("#code").text(str1);
        }

        code();
        $("#code").click(code);
        //	验证码验证
        $('input').eq(4).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next().next("div").text("");
                $(this).parent().next().next("div").css("color", '#ccc');
            } else if ($(this).val().toUpperCase() != $("#code").text().toUpperCase()) {
                $(this).parent().next().next("div").text("验证码不正确");
                $(this).parent().next().next("div").css("color", 'red');
            } else {
                $(this).parent().next().next("div").text("");
            }
        })

        //	提交按钮
        /*
        $("#submit_btn").click(function (e) {
            for (var j = 0; j < 5; j++) {
                if ($('input').eq(j).val().length == 0) {
                    $('input').eq(j).focus();
                    if (j == 4) {
                        $('input').eq(j).parent().next().next("div").text("此处不能为空");
                        $('input').eq(j).parent().next().next("div").css("color", 'red');
                        e.preventDefault();
                        return;
                    }
                    $('input').eq(j).parent().next(".tips").text("此处不能为空");
                    $('input').eq(j).parent().next(".tips").css("color", 'red');
                    e.preventDefault();
                    return;
                }
            }
            //协议
            if ($("#xieyi")[0].checked) {
                //向变量stuList数组添加一个数值，数值内部格式Student(name,password,tel,id)
                //发送用户信息
                stuList.push(new Student($('input').eq(0).val(), $('input').eq(1).val(), $('input').eq(3).val(), stuList.length + 1));
                localStorage.setItem('stuList', JSON.stringify(stuList));
                alert("注册成功");
                window.open("userlist.html}", "_blank");
            } else {
                $("#xieyi").next().next().next(".tips").text("请勾选协议");
                $("#xieyi").next().next().next(".tips").css("color", 'red');
                e.preventDefault();
                return;
            }
        })
        */

        //  建立构造函数，构造学生信息模板
        function Student(name, password, tel, id) {
            this.name = name;
            this.password = password;
            this.tel = tel;
            this.id = id;
        }

        //	获取之前所有已经注册的用户集合
        function getStuList() {
            var list = localStorage.getItem('stuList');
            if (list != null) {
                return JSON.parse(list);
            } else {
                return new Array();
            }
        }

    })
    $(".ty").click(function () {
        $(".zong").hide();
       // $(".laoda").hide();
    });
    $(".cuo").click(function () {
        $(".zong").hide();
    });

	$(function () {
		$("#sendCode").click(function () {
			//2、倒计时
			if($(this).hasClass("disabled")) {
				//正在倒计时中
			} else {
				//1、给指定手机号发送验证码
				$.get("/sms/sendCode?phone=" + $("#phoneNum").val(),function (data) {
                    console.log(data);
					if(data.code != 0) {
						alert(data.msg);
					}
				});
				timeoutChangeStyle();
			}
		});
	});

	var num = 60;
	function timeoutChangeStyle() {
		$("#sendCode").attr("class","disabled");
		if(num == 0) {
			$("#sendCode").text("发送验证码");
			num = 60;
			$("#sendCode").attr("class","");
		} else {
			var str = num + "s 后再次发送";
			$("#sendCode").text(str);
			setTimeout("timeoutChangeStyle()",1000);
		}
		num --;
	}
</script>
</body>

</html>
